{% extends 'layout.html' %}
{% load static %}
{% block content %}

<div class="container">
    <div class="panel panel-default">
        <div class="panel-heading">表单</div>
        <div class="panel-body">

            <form id="formAdd" novalidate>
                <div class="clearfix">
                    {% for field in form %}
                    <div class="col-xs-6">
                        <div class="form-group" style="position: relative;margin-bottom: 20px;">
                            <label>{{ field.label }}</label>
                            {{ field }}
                            <span style="color: red; position: absolute;"></span>
                        </div>
                    </div>
                    {% endfor %}
                </div>
                <div class="col-xs-12"><button id="btnAdd" type="submit" class="btn btn-primary">提 交</button></div>
            </form>
        </div>
    </div>
    <!--
    <h1>任务管理</h1>
    <h3>示例1</h3>
    <input id="btn1" type="button" class="btn btn-primary" value="点击1" onclick="clickMe();">
    <h3>示例2</h3>
    <input type="text" id="txtUser" placeholder="姓名">
    <input type="text" id="txtPwd" placeholder="年龄">
    <input id="btn2" type="button" class="btn btn-primary" value="点击2">
    <h3>示例3</h3>
    <form id="form3">
        <input type="text" name="user" placeholder="姓名">
        <input type="text" name="age" placeholder="年龄">
        <input type="text" name="email" placeholder="邮箱">
        <input type="text" name="more" placeholder="介绍">
        <input id="btn3" type="button" class="btn btn-primary" value="点击3">
    </form>
</div>
-->
{% endblock %}

{% block js %}
<script type='text/javascript'>

    $(function () {
        bindBtn1Event();
        bindBtn2Event();
        bindBtn3Event();
        bindBtnAddEvent();
    })

    function bindBtn1Event() {
        $('#btn1').click(function () {
            $.ajax({
                url: '/task/ajax/',
                type: 'post',
                data: {
                    n1: 123,
                    n2: 456,
                }, success: function (res) {
                    console.log(res);
                    console.log(res.data);
                    console.log(res.status);
                }, dataType: 'JSON',
            })
        })
    }

    function bindBtn2Event() {
        $('#btn2').click(function () {
            $.ajax({
                url: '/task/ajax/',
                type: 'post',
                data: {
                    user: $('#txtUser').val(),
                    age: $('#txtAge').val(),
                }, success: function (res) {
                    console.log(res);
                    console.log(res.data);
                    console.log(res.status);
                }, dataType: 'JSON',
            })
        })
    }

    function bindBtn3Event() {
        $('#btn3').click(function () {
            $.ajax({
                url: '/task/ajax/',
                type: 'post',
                data: $('#form3').serialize()
                , success: function (res) {
                    console.log(res);
                    console.log(res.data);
                    console.log(res.status);
                }, dataType: 'JSON',
            })
        })
    }

    function bindBtnAddEvent() {
        $("#btnAdd").click(function () {
            $(".error-msg").empty();
            $.ajax({
                url: '/task/add/',
                type: "post",
                data: $("#formAdd").serialize(),
                dataType: "JSON",
                success: function (res) {
                    if (res.status) {
                        alert("添加成功")
                    } else {
                        $.each(res.error, function (name, data) {
                            $("#id_" + name).next().text(data[0])
                        })
                    }
                }
            })
        })
    }

</script>
{% endblock %}